import React, { Component } from 'react';
import "../../styles/home/SwiperBox.scss";
//轮播图数据请求
import { index_banner } from '../../api/index';
//ant.d组件
import { Carousel } from 'antd';

const contentStyle = {
    height: '150px',
    padding: '10px',
    textAlign: 'center',
    backgroundColor: '#f1f3f4',
  };
class SwipeBox extends Component {
    constructor(props) {
        super(props);
        //初始化组件状态(数据)
        this.state = {
            list: []
        }
    }
    componentDidMount() {
        console.log('componentDidMount');
        //一般在这个方法中 发送ajax请求, 创建定时器, 监听事件
        index_banner().then((res) => {
            console.log(res.data);
            this.setState({ bannerlist: res.data.list });
            // eslint-disable-next-line react/no-direct-mutation-state
            this.state.list = res.data.list
        })
    }
    render() {
        return (
            <Carousel className='swiperBox' autoplay>
                {
                    this.state.list.map((item, index) => {
                        return (
                            <div className='imgBox' key={index}>
                                <img style={contentStyle} src={item.pic} alt="" />
                            </div>

                        )
                    })
                }
            </Carousel>
        );
    }
}

export default SwipeBox;